import React, { Component } from 'react';
import { Carousel, Tabs, Toast } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import './style/home.css';
import { connect } from 'react-redux';
import { homeAction } from '../action/home';

const tabs = [
    { title: '按天配资', sub: '1' },
    { title: '按月配资', sub: '2' },
    { title: '免息配资', sub: '3' },
    { title: 'VIP配资', sub: '4' },
];
const tabs2 = [
    { title: '国际期货', sub: '1' },
    { title: '国内期货', sub: '2' },
    { title: '货币期货', sub: '3' },
    { title: '美股港股', sub: '4' },
];
const tabs3 = [
    { title: '美股', sub: '1' },
    { title: '港股', sub: '2' }
];


class _Home extends Component {

    static defaultProps = {
        optionData: [
            {
                img: require('./img/index/xinshouzhiyin.png'),
                title: '新手指引',
                path: '/help'

            },
            {
                img: require('./img/index/youhuiquan.png'),
                title: '优惠券',
                path: '/youhuiquan'
            },
            {
                img: require('./img/index/huodongzhuanqu.png'),
                title: '活动专区',
                path: '/huodongzhuanqu'
            },
            {
                img: require('./img/index/zaixiankefu.png'),
                title: '在线客服',
                path: '/zhuanshukefu'
            }
        ],
        phoneNum: '',
        tabData: [
            { tabTitle: '股票策略', key: 0 },
            { tabTitle: '期货策略', key: 1 },
            { tabTitle: '美港股', key: 2 },
        ]
    }

    constructor(props) {
        super(props);
        this.state = {
            phoneNum: this.props.phoneNum,
            data: ['1', '2', '3'],
            notice: {},
            tabWrapSelect: this.props.tabWrapSelect,
            tab2Index: this.props.tab2Index,
            tab3Index: this.props.tab3Index
        }
        this.isLogin = localStorage.getItem('loginInfo');

    }

    //电话号打码
    secretPhoneNum = (phoneNum) => {
        if (phoneNum) {
            return phoneNum.substring(0, 3) + '****' + phoneNum.substring(7, 11)
        }
    }
    jumpNew(v) {
        this.props.history.push({ pathname: "/newDeal" });
    }
    //设置不同tab页
    renderTabsCoentent = () => {
        switch (this.state.tabWrapSelect) {
            case 0:
                return (
                    <Tabs
                        key='1'
                        tabs={tabs}
                        initialPage={this.state.tab2Index}
                        onChange={(tab, index) => {
                            this.setState({
                                tab2Index: index
                            })
                        }}
                        tabBarTextStyle={{ fontSize: '13px' }}
                        tabBarInactiveTextColor='#999999'
                        tabBarActiveTextColor='#333333'
                        tabBarUnderlineStyle={{ borderColor: '#F98743', borderWidth: '1px' }}
                    >
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', borderRadius: '0.8rem' }}>
                            <div className='homeTabsItem1'>
                                <div className='homeTabsItem1Top'>
                                    <div className='homeTabsItem1TopLeft'>
                                        <span>策略本金</span>
                                        <span>操作周期</span>
                                        <span>费用标准</span>
                                        <span>杠杆倍数</span>
                                        <span>财富效益</span>
                                    </div>
                                    <div className='homeTabsItem1TopCenter'>
                                        <span>推荐理由:</span>
                                        <span>灵活快捷</span>
                                        <span>安全高效</span>
                                    </div>
                                    <div className='homeTabsItem1TopRight'>
                                        <span style={{ marginTop: '1.3rem' }}>最低2000元起</span>
                                        <span>2天起且顺延</span>
                                        <span>12元/万/天起</span>
                                        <span>3倍~10倍任选</span>
                                        <span>最高增长10倍</span>
                                    </div>
                                </div>
                                <div className='homeTabsItem1Button'>
                                    立即申请
                                    </div>
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', borderRadius: '0.8rem' }}>

                            <div className='homeTabsItem1'>
                                <div className='homeTabsItem1Top'>
                                    <div className='homeTabsItem1TopLeft'>
                                        <span>策略本金</span>
                                        <span>操作周期</span>
                                        <span>费用标准</span>
                                        <span>杠杆倍数</span>
                                        <span>财富效益</span>
                                    </div>
                                    <div className='homeTabsItem1TopCenter'>
                                        <span>热门原因:</span>
                                        <span>高效稳健</span>
                                        <span>安全划算</span>
                                    </div>
                                    <div className='homeTabsItem1TopRight'>
                                        <span>最低2000元起</span>
                                        <span>2天起且顺延</span>
                                        <span>12元/万/天起</span>
                                        <span>3倍~10倍任选</span>
                                        <span>最高增长10倍</span>
                                    </div>
                                </div>
                                <div className='homeTabsItem1Button'>
                                    立即申请
                                    </div>
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', borderRadius: '0.8rem' }}>
                            <div className='homeTabsItem1'>
                                <div className='homeTabsItem1Top'>
                                    <div className='homeTabsItem1TopLeft'>
                                        <span>策略本金</span>
                                        <span>操作周期</span>
                                        <span>费用标准</span>
                                        <span>杠杆倍数</span>
                                        <span>财富效益</span>
                                    </div>
                                    <div className='homeTabsItem1TopCenter'>
                                        <span>免息理由:</span>
                                        <span>品牌实力</span>
                                        <span>低风险性</span>
                                    </div>
                                    <div className='homeTabsItem1TopRight'>
                                        <span>最低2000元起</span>
                                        <span>2天起且顺延</span>
                                        <span>12元/万/天起</span>
                                        <span>3倍~10倍任选</span>
                                        <span>最高增长10倍</span>
                                    </div>
                                </div>
                                <div className='homeTabsItem1Button'>
                                    立即申请
                                    </div>
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', borderRadius: '0.8rem' }}>
                            <div className='homeTabsItem1'>
                                <div className='homeTabsItem1Top'>
                                    <div className='homeTabsItem1TopLeft'>
                                        <span>策略本金</span>
                                        <span>操作周期</span>
                                        <span>费用标准</span>
                                        <span>杠杆倍数</span>
                                        <span>财富效益</span>
                                    </div>
                                    <div className='homeTabsItem1TopCenter'>
                                        <span>VIP理由</span>
                                        <span>贵宾礼遇</span>
                                        <span>大额操盘</span>
                                    </div>
                                    <div className='homeTabsItem1TopRight'>
                                        <span>最低2000元起</span>
                                        <span>2天起且顺延</span>
                                        <span>12元/万/天起</span>
                                        <span>3倍~10倍任选</span>
                                        <span>最高增长10倍</span>
                                    </div>
                                </div>
                                <div className='homeTabsItem1Button'>
                                    立即申请
                                    </div>
                            </div>
                        </div>
                    </Tabs>
                )
            case 1:
                return (
                    <Tabs tabs={tabs2}
                        key='2'
                        initialPage={this.state.tab3Index}
                        onChange={(tab, index) => {
                            this.setState({
                                tab3Index: index
                            })
                        }}
                        tabBarTextStyle={{ fontSize: '13px' }}
                        tabBarInactiveTextColor='#999999'
                        tabBarActiveTextColor='#333333'
                        tabBarUnderlineStyle={{ borderColor: '#F98743', borderWidth: '1px' }}
                    >
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', marginBottom: '1.5rem' }}>
                            <div className='homeTabsItem2'>
                                <div className="homeTabsItem2Head">
                                    <span>产品名称</span>
                                    <span>状态</span>
                                    <span>最新价格</span>
                                    <span>涨跌幅</span>
                                </div>
                                {
                                    this.futuresData && this.futuresData.map((v, k) => {
                                        return (
                                            <div className="homeTabsItem2Head" key={v + k} onClick={() => this.jumpNew(v)}>
                                                <div className='homeTabsItem2HeadName' >
                                                    <span className='homeTabsItem2HeadName1'>{v.name}</span>
                                                    <span className='homeTabsItem2HeadName2'>{v.detaile}</span>
                                                </div>
                                                <span className='homeTabsItem2HeadSpan2' >{v.status}</span>
                                                <span className='homeTabsItem2HeadSpan2' >{v.price}</span>
                                                <span className='homeTabsItem2HeadSpan1'>{v.riseAndFall}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', marginBottom: '1.5rem' }}>
                            <div className='homeTabsItem2'>
                                <div className="homeTabsItem2Head">
                                    <span>产品名称</span>
                                    <span>状态</span>
                                    <span>最新价格</span>
                                    <span>涨跌幅</span>
                                </div>
                                {
                                    this.futuresData && this.futuresData.map((v, k) => {
                                        return (
                                            <div className="homeTabsItem2Head" key={v + k}>
                                                <div className='homeTabsItem2HeadName' >
                                                    <span className='homeTabsItem2HeadName1'>{v.name}</span>
                                                    <span className='homeTabsItem2HeadName2'>{v.detaile}</span>
                                                </div>
                                                <span className='homeTabsItem2HeadSpan2' >{v.status}</span>
                                                <span className='homeTabsItem2HeadSpan2' >{v.price}</span>
                                                <span className='homeTabsItem2HeadSpan1'>{v.riseAndFall}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', marginBottom: '1.5rem' }}>
                            <div className='homeTabsItem2'>
                                <div className="homeTabsItem2Head">
                                    <span>产品名称</span>
                                    <span>状态</span>
                                    <span>最新价格</span>
                                    <span>涨跌幅</span>
                                </div>
                                {
                                    this.futuresData && this.futuresData.map((v, k) => {
                                        return (
                                            <div className="homeTabsItem2Head" key={v + k}>
                                                <div className='homeTabsItem2HeadName' >
                                                    <span className='homeTabsItem2HeadName1'>{v.name}</span>
                                                    <span className='homeTabsItem2HeadName2'>{v.detaile}</span>
                                                </div>
                                                <span className='homeTabsItem2HeadSpan2' >{v.status}</span>
                                                <span className='homeTabsItem2HeadSpan2' >{v.price}</span>
                                                <span className='homeTabsItem2HeadSpan1'>{v.riseAndFall}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', marginBottom: '1.5rem' }}>
                            <div className='homeTabsItem2'>
                                <div className="homeTabsItem2Head">
                                    <span>产品名称</span>
                                    <span>状态</span>
                                    <span>最新价格</span>
                                    <span>涨跌幅</span>
                                </div>
                                {
                                    this.futuresData && this.futuresData.map((v, k) => {
                                        return (
                                            <div className="homeTabsItem2Head" key={v + k}>
                                                <div className='homeTabsItem2HeadName' >
                                                    <span className='homeTabsItem2HeadName1'>{v.name}</span>
                                                    <span className='homeTabsItem2HeadName2'>{v.detaile}</span>
                                                </div>
                                                <span className='homeTabsItem2HeadSpan2' >{v.status}</span>
                                                <span className='homeTabsItem2HeadSpan2' >{v.price}</span>
                                                <span className='homeTabsItem2HeadSpan1'>{v.riseAndFall}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </Tabs>
                )
            case 2:
                return (
                    <Tabs tabs={tabs3}
                        key='3'
                        initialPage={this.state.tab3Index}
                        onChange={(tab, index) => {
                            this.setState({
                                tab3Index: index
                            })
                        }}
                        tabBarTextStyle={{ fontSize: '13px' }}
                        tabBarInactiveTextColor='#999999'
                        tabBarActiveTextColor='#333333'
                        tabBarUnderlineStyle={{ borderColor: '#F98743', borderWidth: '1px' }}
                    >
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', marginBottom: '1.5rem' }}>
                            <div className='homeTabsItem2'>
                                <div className="homeTabsItem2Head">
                                    <span>产品名称</span>
                                    <span>状态</span>
                                    <span>最新价格</span>
                                    <span>涨跌幅</span>
                                </div>
                                {
                                    this.futuresData && this.futuresData.map((v, k) => {
                                        return (
                                            <div className="homeTabsItem2Head" key={v + k} onClick={() => this.jumpNew()}>
                                                <div className='homeTabsItem2HeadName' >
                                                    <span className='homeTabsItem2HeadName1'>{v.name}</span>
                                                    <span className='homeTabsItem2HeadName2'>{v.detaile}</span>
                                                </div>
                                                <span className='homeTabsItem2HeadSpan2' >{v.status}</span>
                                                <span className='homeTabsItem2HeadSpan2' >{v.price}</span>
                                                <span className='homeTabsItem2HeadSpan1'>{v.riseAndFall}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </Tabs>
                )
            default:
                break;
        }
    }

    //切换tab页面
    changeTabs = (v) => {
        this.setState({
            tabWrapSelect: v
        })
    }

    componentDidMount() {
        //模拟网路请求 请求轮播图，通告栏
        setTimeout(() => {
            this.setState({
                data: [
                    { imgUrl: require('./img/index/bun1.png'), path: "/choujiang" },
                    { imgUrl: require('./img/index/bun2.png'), path: "/choujiang" },
                    { imgUrl: require('./img/index/bun3.png'), path: "/choujiang" },
                ],
                notice: {
                    pelpeoName: '用户周先生',
                    pelpeoAction: '买涨小麦',
                    pelpeoIncome: '盈利',
                    pelpeoMoney: '480000元',
                    noticeDate: '2020-03-12'
                }
            });
        }, 100);

        this.futuresData = [
            { name: '国际期货', detaile: '600123', status: '实交中', price: '23215.00', riseAndFall: '＋1.09%' },
            { name: '国际期货', detaile: '600123', status: '实交中', price: '23215.00', riseAndFall: '＋1.09%' },
            { name: '国际期货', detaile: '600123', status: '实交中', price: '23215.00', riseAndFall: '＋1.09%' },
            { name: '国际期货', detaile: '600123', status: '实交中', price: '23215.00', riseAndFall: '＋1.09%' },
            { name: '国际期货', detaile: '600123', status: '实交中', price: '23215.00', riseAndFall: '＋1.09%' },
            { name: '国际期货', detaile: '600123', status: '实交中', price: '23215.00', riseAndFall: '＋1.09%' },
            { name: '国际期货', detaile: '600123', status: '实交中', price: '23215.00', riseAndFall: '＋1.09%' },
        ]

    }

    goRegistered = () => {
        this.props.history.push({ pathname: "/registered" });
    }
    jumpDetail(item) {
        this.props.history.push({ pathname: item.path });
    }
    goLogin = () => {
        this.props.history.push({ pathname: "/login" });
    }

    goChiZhi = () => {
        this.props.history.push({ pathname: "/chongzhi" });
    }

    componentWillUnmount() {
        this.props.homeAction({
            type: 'tabWrapSelect',
            data: this.state.tabWrapSelect
        })
        this.props.homeAction({
            type: 'tab2Index',
            data: this.state.tab2Index
        })
        this.props.homeAction({
            type: 'tab3Index',
            data: this.state.tab3Index
        })
    }

    goOptin = (v) => {
        if (v.title === '优惠券') {
            this.props.history.push({ pathname: v.path, state: { type: true } });
        } else {
            this.props.history.push({ pathname: v.path });
        }
    }
    //系统消息
    jumpMsg() {
        this.props.history.push({ pathname: "/message" });
    }
    alert() {
        Toast.success("如果功能老板自己加", 1.5)

    }
    render() {
        return (
            <div className='home'>
                <div className='homeHeader '>
                    <span className='homeHeaderChongZhi' onClick={this.goChiZhi}>充值</span>
                    <span className='homeHeaderTitle'>首页</span>
                    {
                        this.isLogin ?
                            <span className='homeHeaderPhoneNum'>{this.secretPhoneNum('15549552920')}</span> :
                            <div className='homeHeaderPhoneNum'>
                                <span onClick={this.goRegistered} >注册/ </span>
                                <span onClick={this.goLogin} style={{ color: '#FC5858' }}  >登录</span  >
                            </div>
                    }

                </div>
                <div className='homeScoll'>

                    <div className='homeMain'>
                        <div className='homeMainCarousel'>
                            <Carousel
                                autoplay={true}
                                infinite
                                dotStyle={{ width: '0.6rem', height: '0.6rem', marginBottom: '1.0rem' }}
                                dotActiveStyle={{ backgroundColor: 'rgba(255,255,255,1)', width: '0.6rem', height: '0.6rem', marginBottom: '1.0rem' }}
                            >
                                {this.state.data.map((val, index) => (
                                    <img
                                        onClick={() => { this.jumpDetail(val) }}
                                        key={val}
                                        src={val.imgUrl}
                                        alt=""
                                        height='130px'
                                        width='100%'
                                        style={{ borderRadius: '0.5rem' }}
                                    />
                                ))}
                            </Carousel>
                        </div>
                        <div className='homeMainOption'>
                            {
                                this.props.optionData && this.props.optionData.map((v, k) => {
                                    return (
                                        <div key={v + k} onClick={() => this.goOptin(v)} className='homeMainOptionItem'>
                                            <img alt='' src={v.img}></img>
                                            <span>{v.title}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className='homeMainNoticeBar' onClick={() => this.jumpMsg()}>
                            <div className='homeMainNoticeBarLeft'>
                                <img alt='' width='15rem' height='15rem' src={require('./img/index/noticebar.png')}></img>
                                {
                                    this.state.notice ?
                                        <div className='homeMainNoticeBarLeftTitle'>
                                            <span  >{this.state.notice.pelpeoName}</span>
                                            <span style={{ color: '#FC5858' }} >{this.state.notice.pelpeoAction}</span>
                                            <span>{this.state.notice.pelpeoIncome}</span>
                                            <span style={{ color: '#FC5858' }} >{this.state.notice.pelpeoMoney}</span>
                                        </div> : null
                                }
                            </div>
                            <div className='homeMainNoticeBarRight'>
                                {this.state.notice ? <span>{this.state.notice.noticeDate}</span> : null}
                                <img alt='' width='14rem' height='14rem' src={require('./img/index/right.png')}></img>
                            </div>
                        </div>
                    </div>
                    <div className='homeZhiShu' onClick={() => this.alert()}>
                        <div className='homeZhiShuItem'>
                            <div className='homeZhiShuItemMain'>
                                <span className='homeZhiShuItemMainP1' >上证指数</span>
                                <span className='homeZhiShuItemMainP2' >2838.49</span>
                                <span className='homeZhiShuItemMainP3' >18.56&nbsp;&nbsp;0.66%</span>
                            </div>
                            <img alt='' width='97%' height='100%' src={require('./img/index/bgm1.png')}></img>
                        </div>
                        <div className='homeZhiShuItem' style={{ justifyContent: 'flex-end', display: 'flex' }}>
                            <div className='homeZhiShuItemMain'>
                                <span className='homeZhiShuItemMainP1' >深圳指数</span>
                                <span className='homeZhiShuItemMainP2' >10527.99</span>
                                <span className='homeZhiShuItemMainP3' >57.20&nbsp;&nbsp;0.55%</span>
                            </div>
                            <img alt='' width='97%' height='100%' src={require('./img/index/bgm2.png')}></img>
                        </div>
                    </div>
                    <div className='homeContent '>
                        <div className='homeContentTabs'>
                            <div className='homeContentTabsWrap'>
                                {this.props.tabData && this.props.tabData.map((v, k) => {
                                    let className = '';
                                    if (k === this.state.tabWrapSelect) {
                                        className = 'select'
                                    }
                                    return (
                                        <div key={v + k} onClick={() => this.changeTabs(k)} className={`${className}HomeContentTabsWrap`} >
                                            {v.tabTitle}
                                        </div>
                                    )
                                })}
                            </div>
                            <div className='homeContentTabsContent'>
                                {this.renderTabsCoentent(this.setState.tabWrapSelect)}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        );
    }

}

function mapStateToProps(state) {
    return {
        ...state.homeReducer
    }
}

export default connect(mapStateToProps, { homeAction })(withRouter(_Home)) 